<template>
    <view>
        <div class="login-box">
            <!-- <nut-row type="flex" justify="center" v-if="!hasLogin">
                <nut-col :span="22">
                    <nut-button type="default" block color="#2b35fa" class="login-btn"
                        @click="wxLogin">微信一键登录</nut-button>
                </nut-col>
            </nut-row> -->
            <!-- <nut-row type="flex" justify="center" v-if="!hasLogin">
                <nut-col :span="22">
                    <nut-button type="default" block color="#2b35fa" style="margin-top: 20rpx;" openType="getUserInfo"
                        v-if="hasRegister" @getuserinfo="wxLogin">微信一键登录11</nut-button>
                </nut-col>
            </nut-row> -->
            <nut-row v-if="hasLogin">
                <div class="flex-a info">
                    <div class="flex-avatar">
                        <nut-avatar size="large" bg-color="#ffff">
                            <img style="width:66px;height: 66px;border-radius: 50%;" :src="user.headerImg" />
                        </nut-avatar>
                    </div>
                    <div class="nick">
                        <div>{{ user.nickName }}</div>
                        <div>{{ user.phone }}</div>
                    </div>
                </div>
            </nut-row>
        </div>
        <div class="flex-member-infor flex-a flex-b">
            <div class="flex-member-details flex-member-details-titlefont">
                <image style="width:20px;height: 20px;" src="https://pic.imgdb.cn/item/64818f431ddac507ccb45441.png">
                </image>
                &nbsp;账户余额
            </div>
            <nut-button color="#fff" size="mini" style="color: #21C38F;"> 立即提现 </nut-button>
        </div>
    </view>
</template>

<script lang="ts">
// import drawQrcode from 'weapp-qrcode'
import { ref, reactive, toRefs, onMounted } from 'vue';
import mitt from "../../../utils/mitt";
import { Grid, GridItem, Dialog } from '@nutui/nutui';
import { Right } from '@nutui/icons-vue-taro';
import Taro from '@tarojs/taro';
import { useShareAppMessage } from '@tarojs/taro';
import { getImgCash, loginTest } from '../../../../api/index'
import '@nutui/nutui/dist/packages/dialog/style';
export default {
    components: {
        'nut-grid': Grid,
        'nut-grid-item': GridItem,
        'nut-dialog': Dialog,
        Right
    },
    setup() {
        useShareAppMessage((res) => {
            if (res.from === 'button') {
                // 来自页面内转发按钮
                console.log(res.target)
            }
            return {
                title: '自定义转发标题',
                path: '/page/user?id=123',
            }
        });
        const visible = ref(false);
        const qrCode = ref('');
        const hasLogin = ref(false)
        const hasRegister = ref(true)
        const show = ref(false)
        const onCancel = () => {
            visible.value = false
        };
        const onOk = () => {
            console.log('event ok');
        };
        const tipsClick = () => {
            getImgCash().then(res => {
                if (res.resultCode == 200) {
                    qrCode.value = res.message
                }
            })
            visible.value = true;
        };
        const state = reactive({
            user: {},
            money: 0,
            point: 0
        });
        // useShareAppMessage((res) => {
        //     console.log("res.target")
        //     // var user = Taro.getStorageSync('user')
        //     if (res.from === 'button') {
        //         // 来自页面内转发按钮
        //         console.log(res.target)
        //     }
        //     return {
        //         title: '邀请有礼',
        //         path: '/pages/index/index?userId=',
        //     }
        // })
        onMounted(() => {
            Taro.getStorage({
                key: 'user',
                success: function (res) {
                    console.log(res.data)
                    hasLogin.value = res.data ? true : false
                    state.user = res.data ? res.data : {}
                    if (res.data) {

                    }
                }
            })
            mitt.on("hasLogin", (val) => {
                hasLogin.value = val
            })
        });
        const wxLogin = (e) => {
            // let phonecode = e.detail.code;
            Taro.showLoading({
                title: '登录中',
            })
            loginTest().then(res => {
                if (res.code == 0) {
                    Taro.setStorage({
                        key: "user",
                        data: res.data.user
                    })
                    Taro.setStorage({
                        key: "token",
                        data: res.data.token
                    })
                    state.user = res.data.user
                    hasLogin.value = true
                    Taro.hideLoading()
                }
            })
        }
        const jumpTo = (path) => {
            Taro.navigateTo({ url: path })
        }
        return {
            visible,
            qrCode,
            tipsClick,
            onCancel,
            onOk,
            wxLogin,
            hasLogin,
            jumpTo,
            hasRegister,
            show,
            ...toRefs(state)
        };
    }
};
</script>

<style lang="scss">
.nut-row {
    overflow: hidden;

}

.login-btn {
    margin-top: 30rpx;
}

.login-box {
    position: relative;
}

.login-box .photo {
    width: 40rpx;
    height: 40rpx;
    position: absolute;
    right: 40rpx;
    top: 50rpx;
}

.info {
    color: #666;
    font-size: 28rpx
}

.info .nick {
    margin: 30rpx 0 0 20rpx;
}

.flex-avatar {
    margin: 5% 0 0 5%;
}

.flex-infor {
    margin-top: 15%;
    margin-bottom: 5%;

    .nick {
        display: inline-block;
        max-width: 150rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin: 0 10rpx;
    }

    &.flex-infor-id {
        margin-top: 5%;
    }
}

.flex-id-font {
    font-size: 20px;
}

.flex-membercode {
    margin-left: 40%;
}

.flex-member-infor {
    margin: 5% auto 0;
    width: 90%;
    align-items: center;
    background: linear-gradient(to right, #21C38F, #D3F2E8);
    border-radius: 20px 20px 0 0;
    padding: 40rpx 60rpx;
    box-sizing: border-box;
    color: #fff;
}

.flex-member-details {
    display: flex;
    align-items: center;

    &.flex-member-details-font {
        font-size: 36px;
        font-weight: bold;
    }

    &.flex-member-details-fontcolor {
        color: #8a8a8a;
    }

    &.flex-member-details-titlefont {
        font-size: 30px;
    }
}

.diy-dialog {
    position: absolute;
    top: -10%;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    z-index: 99;
    background-color: rgba($color: #000, $alpha: 0.3);

    .box {
        width: 80%;
        position: absolute;
        top: 50%;
        left: 50%;
        background: #fff;
        transform: translate(-50%, -50%);
        border-radius: 20rpx;

        .head {
            text-align: center;
            font-size: 30rpx;
            color: #000;
            padding: 20rpx 0 10rpx;
            font-weight: bold;
        }

        .title {
            height: 800rpx;
            overflow-y: auto;
            text-align: justify;
            padding: 20rpx 50rpx 40rpx;
            color: #808080;
            box-sizing: border-box;
            font-size: 24rpx;
            line-height: 36rpx;
            margin-bottom: 30rpx;
        }

        .foot {
            text-align: center;
            padding: 20rpx 0 20rpx;
            border-top: 1rpx solid #F0F0F0;

            .nut-button:last-child {
                margin-left: 30rpx;
            }

            .nut-button {
                width: 240rpx;
                height: 60rpx;
                white-space: nowrap;
                font-weight: bold;
            }

            .nut-button:first-child {
                color: #808080;
            }
        }
    }
}
</style>